<template>
  <tree-select
    v-model="selectedValue"
    v-bind="$attrs"
    :style="{ width: width }"
    :options="options"
    :placeholder="placeholder"
    :normalizer="handleTreeSelectNormalizer"
    :multiple="multiple"
    :required="true"
  />
</template>

<script>
import { getAllOrgList } from '@/views/sys/org/api'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  // 当前页面名称（组件）
  name: 'FtOrgSelect',
  // 引用组件
  components: { TreeSelect },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    value: {
      type: String,
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    multiple: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '220px'
    }
  },
  data() {
    return {
      // 选中值
      selectedValue: this.value,
      options: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selectedValue = val
    },
    selectedValue(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {
    this.handleInit()
  },
  methods: {
    async handleInit() {
      getAllOrgList().then(res => {
        this.options = res.data
      })
    },
    handleChange(value) {
      // 单选模式：返回单个选中项
      const item = this.list.find(item => item.orgId === value)
      const result = {
        value,
        label: item ? item.orgName : ''
      }

      this.$emit('change', result)
    },
    // 字段默认 id label 用于规范化数据源
    handleTreeSelectNormalizer(node) {
      if (!node.children || !node.children.length) {
        delete node.children
      }
      return node
    }
  }
}
</script>
<style>
.vue-treeselect__control{
  height: 32px;
}
.vue-treeselect--disabled .vue-treeselect__control {
  background-color: #ffffff !important;
}
</style>
